<template>
  <!-- ！！！排版管理！！！ -->
  <div class="branches">
    <div class="app-container">
      <!-- 上 -->
      <div class="top background">
        <div class="input">
          <span>员工账号:</span>
          <el-input v-model="pageParams.employeeNumber" medium placeholder="请输入员工账号" type="text" style="width: 250px; margin: 10px;" />
        </div>
        <div class="input">
          <span>员工姓名:</span>
          <el-input v-model="pageParams.name" medium placeholder="请输入员工姓名" type="text" style="width: 250px; margin: 10px; " />
        </div>
        <div class="input">
          <span>工作模式:</span>
          <el-select v-model="pageParams.workPatternId" placeholder="请选择" style="width: 250px; margin: 10px; ">
            <el-option
              v-for="item in patternsList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </div>

        <div class="input">
          <span>月份:</span>
          <el-date-picker
            v-model="pageParams.month"
            style="width: 250px; margin: 10px; "
            type="month"
            placeholder="选择月"
          />
        </div>
        <div class="input">
          <span>所属机构:</span>
          <el-cascader
            v-model="pageParams.agentId"
            style="width: 250px; margin: 10px; "
            placeholder="请输入所属机构"
            :options="tree"
            :props="defaultProps"
            :show-all-levels="false"
            clearable
            @change="handleChange"
          />
          <div class="input">
            <el-button medium type="primary" @click="seek">搜索</el-button>
            <el-button medium @click="reset">重置</el-button>
          </div>
        </div>
        <!-- 下 -->
        <div class="button background">
          <div class="input" style="margin-bottom: 20px;">
            <el-button medium type="primary" @click="$router.push('/transit2/workArrange/setting')">排版设置</el-button>
            <el-button medium plain type="primary">排版绑定</el-button>
          </div>
          <!-- 表格 -->
          <el-table
            ref="multipleTable"
            stripe
            border
            :data="tableData"
            tooltip-effect="dark"
            style="width: 1700px"
          >
            <el-table-column
              type="selection"
              width="55"
              fixed="left"
            />
            <el-table-column
              prop="employeeNumber"
              label="员工账号"
              width="120"
              fixed
            />
            <el-table-column
              prop="name"
              label="员工姓名"
              width="120"
              fixed
            />
            <el-table-column
              prop="phone"
              label="员工电话"
              width="120"
              fixed
            />
            <el-table-column
              prop="userType"
              label="员工角色"
              fixed
            >
              <template v-slot="{row}">
                <span v-if="row.userType===1">员工</span>
                <span v-else-if="row.userType===2">快递员</span>
                <span v-else>司机</span>
              </template>
            </el-table-column>

            <el-table-column
              prop="workPatternName"
              label="当前工作模式"
              fixed
            />

            <el-table-column
              v-for="(item,index) in workSchedulesList.length ? workSchedulesList[0].workSchedules:[]"
              :key="item.index"

              :label="String(index+1)"
              align="center"
            >
              <template v-slot="{row}">
                <div>
                  {{ row.workPatternName?row.workSchedules[index]?'上':'休':'无' }}
                </div>
              </template>
            </el-table-column>

          </el-table>

          <!-- 分页 -->
          <div class="block">
            <el-pagination
              :current-page="pageParams.page"
              :page-size="pageParams.pageSize"
              :page-sizes="[10, 20, 30, 50]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="counts"
              @current-change="handleCurrentChange"
              @size-change="handleSizeChange"
            />
          </div>
        </div>
      </div>
    </div>
  </div></template>

<script>
import { getPatterns, getSchedulings } from '@/api/workArrange'
import { getTree } from '@/api/courier'

export default {
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'name',
        value: 'id',
        checkStrictly: true,
        emitPath: false
      },
      tree: [], // 机构树状列表
      workSchedulesList: [], // 排班日期列表
      tableData: [], // 排班列表
      pageParams: {
        agencyId: '', // 网点-integer
        employeeNumber: '', // 员工账号
        month: '', // 月份,该值为空默认当前月份yy-mm
        name: '', // 员工名称
        page: 1, // 页面-integer
        pageSize: 10, // integer
        userType: '', // 用户类型：1：员工，2：快递员，3:司机
        workPatternId: '' // 工作模式ID 默认 0 ：无工作模式
      },
      patternsList: [], // 工作模式列表
      counts: 0 // 总条目数
    }
  },
  created() {
    this.getList()
    this.getPatternsList()
    this.TreeList()
  },
  methods: {
    // 排班列表
    async getList() {
      const res = await getSchedulings(this.pageParams)
      this.tableData = res.data.items
      this.counts = Number(res.data.counts)
      this.workSchedulesList = res.data.items || []
      console.log(this.workSchedulesList)
    },
    // 页面数量切换
    handleSizeChange(newPageSize) {
      this.pageParams.pageSize = newPageSize

      this.getList()
    },
    // 页码改变
    handleCurrentChange(newPage) {
      this.pageParams.page = newPage
      this.getList()
    },
    // 搜索
    seek() {
      this.getList()
    },
    // 工作模式列表
    async getPatternsList() {
      const res = await getPatterns()
      // console.log('工作模式列表', res)
      this.patternsList = res.data[1]
      // console.log('工作模式列表', this.patternsList)
    },
    // 树状-机构
    async TreeList() {
      const res = await getTree()
      // console.log(res.data)
      this.tree = JSON.parse(res.data)
      console.log(this.tree)
    },
    // 所属机构
    handleChange(value) {
      this.pageParams.agentId = value
    },
    // 重置
    reset() {
      this.pageParams.agentId = []
      this.pageParams.name = ''
      this.pageParams.employeeNumber = ''
      this.pageParams.workPatternId = ''
      this.pageParams.month = ''
      this.getList()
    }
  }
}
</script>

<style scoped>
.branches{
  margin-left: 20px;
  margin-right: 20px;
}
.background{
  background: #ffffff;
  margin-bottom:25px ;
  padding: 30px;
}
.top{
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  justify-content: flex-start;
  align-items: baseline;
  padding-left: 50px;
}
.button{
  height: 800px;
}
.input{
  margin-right: 45px;
  width: 400px;
}
.block{
  padding-top: 25px;
  font-size: 24px;
  display:flex;
  justify-content: center;
}
</style>
